<template>
  <CollapseContainer v-bind="$attrs" title="项目资源">
    <div ref="barChart" style="width: 100%; height: 210px"></div>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '/@/components/Container/index';

  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';

  // 创建一个ref引用，绑定到div容器
  const barChart = ref<any>(null);

  // 使用onMounted来初始化ECharts
  onMounted(() => {
    setTimeout(() => {
      if (barChart.value) {
        // 初始化ECharts实例
        const chart = echarts.init(barChart.value);

        // 设置柱状图的配置项
        const option = {
          // title: {
          //   text: '来源分布',
          //   left: 'center',
          //   top: '5%',
          //   textStyle: {
          //     fontSize: 22,
          //     fontWeight: 'bold',
          //     color: '#7f8c8d', // 暗灰色
          //   },
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow', // 设置阴影指示器
            },
            backgroundColor: '#2c3e50', // 背景色为深灰色
            textStyle: {
              color: '#ecf0f1', // 浅灰色文字
            },
          },
          xAxis: {
            type: 'category',
            data: ['广告营销', '客户介绍', '合作伙伴', '其他来源'],
            axisLabel: {
              interval: 0, // 设置x轴的标签不重叠
              rotate: 0, // 旋转角度防止标签重叠
              fontSize: 12, // x轴标签的文字大小
              color: '#000', // 使用工业风的灰色
            },
            axisLine: {
              lineStyle: {
                color: '#95a5a6', // 设置x轴的线条颜色为浅灰色
              },
            },
            axisTick: {
              show: false, // 隐藏刻度
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 14, // y轴标签的文字大小
              color: '#7f8c8d', // 使用灰色
            },
            axisLine: {
              lineStyle: {
                color: '#95a5a6', // 设置y轴的线条颜色
              },
            },
            splitLine: {
              lineStyle: {
                color: '#bdc3c7', // 淡灰色的分割线
                type: 'dashed', // 使用虚线分割
              },
            },
          },
          series: [
            {
              name: '数量',
              type: 'bar',
              data: [8, 4, 5, 2],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#5cb3cc' }, // 渐变开始颜色
                  { offset: 1, color: '#b0d5df' }, // 渐变结束颜色
                ]),
                barBorderRadius: [5, 5, 0, 0], // 圆角柱子
              },
              barWidth: '45%', // 设置柱子的宽度
              label: {
                show: true,
                position: 'top',
                color: '#fff', // 白色文字
                fontSize: 14,
              },
              emphasis: {
                itemStyle: {
                  color: '#3498db', // 悬浮时柱子变成浅蓝色
                  shadowBlur: 10,
                  shadowColor: 'rgba(255, 64, 129, 0.5)',
                },
              },
            },
          ],
          backgroundColor: '#fff', // 背景色浅灰色
          grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            top: '20%',
            containLabel: true,
          },
        };

        // 设置配置项并渲染图表
        chart.setOption(option);

        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', () => {
          chart.resize();
        });
      }
    }, 2000);
  });
</script>
